import { ref, computed } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'
/**
 * 检测可见，发送请求
 * @param apiFn 发送请求的函数
 * @returns {Object} { list, target }
 */
export const useObserver = (apiFn) => {
  // 商品列表
  const list = ref([])
  // 被检测可见性的目标元素
  const target = ref(null)
  // 调用检测元素可见性的方法
  // stop            用于停止检测的函数
  // target          被检测的目标元素/组件
  // isIntersecting  目标元素是否可见 true/false
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 如果元素可见
      if (isIntersecting) {
        // 1. 发送请求获取数据
        apiFn().then(({ result }) => {
          list.value = result
        })
        // 2. 停止检测
        stop()
      }
    }
  )
  return { list, target }
}

/**
 * 倒计时逻辑函数封装
 * @param {Number} time 倒计时秒数
 * @returns {Object} { countTime, start, countTimeText, pause }
 */
export const useCountDown = (time = 60) => {
  // 用于倒计时的响应式数据
  const countTime = ref(0)

  const countTimeText = computed(() => {
    return dayjs.unix(countTime.value).format('mm分ss秒')
  })

  // 定时器 resume 用于启动，pause 用于停止
  const { resume, pause } = useIntervalFn(() => {
    // 每隔一段时间秒数减一
    countTime.value--
    // 倒计时结束停止定时器
    if (countTime.value <= 0) {
      pause()
    }
    // { immediate: false } 表示不立刻执行定时器（调用后执行）
  }, 1000, { immediate: false })

  // 启动倒计时的函数封装
  const start = (newTime) => {
    // 初始化倒计时秒数
    if (countTime.value === 0) {
      // 优先使用 start 传递的时间，如果没有则使用默认的 60秒
      countTime.value = newTime || time
    }
    // 启动定时器
    resume()
  }

  // 返回给模板使用的数据
  return { countTime, start, countTimeText, pause }
}
